<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>bootstrap-table - 光年(Light Year Admin)后台管理系统模板</title>
  <link rel="icon" href="favicon.ico" type="image/ico">
  <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
  <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
  <meta name="author" content="yinqi">
  <link href="../../../static/css/bootstrap.min.css" rel="stylesheet">
  <link href="../../../static/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="../../../static/css/animate.css" rel="stylesheet">
  <link href="../../../static/css/style.min.css" rel="stylesheet">
  <link href="../../../static/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
  <!--对话框-->
  <link rel="stylesheet" href="../../../static/js/jconfirm/jquery-confirm.min.css">
</head>
  
<body>

<div class="modal fade" id="add_frame" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">

        </h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form" id="add_form">
                    <input type="hidden" id="id">
          <div class="form-group" >
            <label class="col-sm-2 control-label">请选择技术方向：</label>
            <select class="form-control" style="width: 200px" id="technicalDirection_add">

            </select>
          </div>
          <div class="form-group" >
            <label class="col-sm-2 control-label">请选择班级性质：</label>
            <select class="form-control" style="width: 100px" id="classNature_add">

            </select>
          </div>
          <div class="form-group" >
            <label class="col-sm-2 control-label" for="classTeacher_add">请选择班主任：</label>
            <select class="form-control" style="width: 100px" id="classTeacher_add">

            </select>
          </div>
          <div class="form-group" >
            <label class="col-sm-2 control-label" for="lecturer_add">请选择讲师：</label>
            <select class="form-control" style="width: 100px" id="lecturer_add">

            </select>
          </div>
          <div class="form-group" >
            <label class="col-sm-2 control-label" for="assistant_add">请选择助教：</label>
            <select class="form-control" style="width: 100px" id="assistant_add">

            </select>
          </div>
          <div class="form-group" >
            <label class="col-sm-2 control-label" for="classroom_add">请选择教室：</label>
            <select class="form-control" style="width: 200px" id="classroom_add">

            </select>
          </div>
          <div class="form-group" >
            <label class="col-sm-2 control-label" for="area_add">请选择区域：</label>
            <select class="form-control" style="width: 200px" id="area_add" disabled="disabled">
            </select>
          </div>

          <div class="form-group">
            <label for="openingDate_add" class="col-sm-4 control-label">请选择开班日期：</label>
            <div class="col-sm-8">
              <input class="form-control js-datetimepicker" type="text" id="openingDate_add" placeholder="请选择具体时间" value="" data-side-by-side="true" data-locale="zh-cn" data-format="YYYY-MM-DD HH:mm" />
            </div>
          </div>

          <div class="form-group">
            <label for="endingDate_add" class="col-sm-4 control-label">请选择结束日期：</label>
            <div class="col-sm-8">
              <input class="form-control js-datetimepicker" type="text" id="endingDate_add" placeholder="请选择具体时间" value="" data-side-by-side="true" data-locale="zh-cn" data-format="YYYY-MM-DD HH:mm" />
            </div>
          </div>


          <div class="form-group">
            <label for="schoolInfo_add" class="col-sm-4 control-label">请输入学校信息：</label>
            <div class="col-sm-8">
              <textarea class="form-control" id="schoolInfo_add" rows="6" placeholder="学校信息.."></textarea>
            </div>
          </div>

        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary" id="add_save_btn">保存</button>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid p-t-15">
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header"><h4>开班管理</h4></div>
        <div class="card-body">
          <form id="search-form" class="search-bar" method="get" action="#!" role="form">

              <div class="row">
                <div class="col-xs-3">
                  <div class="input-group m-b-10">
                    <span class="input-group-addon" id="sizing-addon2">技术方向</span>
                    <input type="text" class="form-control" name="technicalDirection-search" placeholder="请输入技术方向" aria-describedby="sizing-addon2" autocomplete="off">
                  </div>
                </div>
                <div class="col-xs-3">
                  <div class="input-group m-b-10">
                    <span class="input-group-addon" id="sizing-addon1">班级性质</span>
                    <input type="text" class="form-control" name="classNature-search" placeholder="请输入班级性质" aria-describedby="sizing-addon2" autocomplete="off">
                  </div>
                </div>

            </div>
          </form>

          <div id="toolbar" class="toolbar-btn-action">
            <button id="btn_add" type="button" class="btn btn-primary m-r-5">
              <span class="mdi mdi-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_delete" type="button" class="btn btn-danger m-r-5">
              <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
            </button>
            <button id="btn_search" type="button" class="btn btn-pink m-r-5">
              <span class="mdi mdi-magnify" aria-hidden="true"></span>搜索
            </button>
            <button id="btn_reset" type="button" class="btn btn-secondary">
              <span class="mdi mdi-autorenew" aria-hidden="true"></span>重置
            </button>
          </div>
          <table id="tb_openingClassInfos"></table>
 
        </div>
      </div>
    </div>

    
  </div>
  
</div>

<script type="text/javascript" src="../../../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../../../static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../../static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="../../../static/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../../../static/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<!--行内编辑插件-->
<link href="../../../static/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
<script type="text/javascript" src="../../../static/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script type="text/javascript" src="../../../static/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>

<script type="text/javascript" src="../../../static/js/main.min.js"></script>

<!--消息提示-->
<script src="../../../static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="../../../static/js/lightyear.js"></script>

<!--对话框-->
<script src="../../../static/js/jconfirm/jquery-confirm.min.js"></script>

<!--时间选择插件-->
<script src="../../../static/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="../../../static/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="../../../static/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<!--日期选择插件-->
<script src="../../../static/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="../../../static/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>

<script type="text/javascript">
  //选择技术方向
  getTechnicalDirection_add();
  //选择班级性质
  getClassNature_add();
  //选择班主任
  getClassTeacher_add();
  //选择讲师
  getLecturer_add();
  //选择助教
  getAssistant_add();
  //选择班级及区域
  getClassroom_add();
  let token = localStorage.getItem("token");
  if (token===null){
    token = sessionStorage.getItem("token");
  }
  let openingClassInfo = {
    technicalDirection : '',
    classNature : ''
  };
  $("#btn_search").click(()=>{
      let technicalDirection_search = $("input[name='technicalDirection-search']").val();
      let classNature_search = $("input[name='classNature-search']").val();
      if(technicalDirection_search!==''||classNature_search!==''){
        openingClassInfo = {
          technicalDirection : technicalDirection_search,
          classNature : classNature_search
        }
        $('#tb_openingClassInfos').bootstrapTable('refresh');
      }
  });

  $("#btn_reset").click(()=>{
    $("#search-form")[0].reset();
    openingClassInfo = {
      technicalDirection : '',
      classNature : ''
    };
    $('#tb_openingClassInfos').bootstrapTable('refresh', {pageSize:this.pageSize});
  });

    $("#btn_add").click(()=>{
      $("#myModalLabel").empty()
      $("#myModalLabel").append("新增开班信息")
      $("#add_form")[0].reset();
      $("#id").val('');
      $("#add_frame").modal({
        backdrop:"static"
      });
    });

    $("#add_save_btn").click(()=>{
      lightyear.loading('show');
      if($("#id").val()=='') {
        $.ajax({
          type: 'POST',
          url: '/ssm/openingClassInfo/openingClassInfo',
          data: JSON.stringify({
            "technicalDirection": $("#technicalDirection_add").val(),
            "classNature": $("#classNature_add").val(),
            "classTeacher": $("#classTeacher_add").val(),
            "lecturer": $("#lecturer_add").val(),
            "assistant": $("#assistant_add").val(),
            "areaId" : $("#area_add").val(),
            "classroomId": $("#classroom_add").val(),
            "openingDate" : $("#openingDate_add").val(),
            "endingDate" : $("#endingDate_add").val(),
            "schoolInfo": $("#schoolInfo_add").val()
          }),
          dataType: 'json',
          contentType: 'application/json',
          // header:{
          //   'Authorization':token
          // },
          // beforeSend : function(request) {
          //   request.setRequestHeader("Authorization",token );
          // },
          success: (data) => {
            if (data.code === 20000) {
              $("#add_frame").modal('hide');
              lightyear.loading('hide');
              lightyear.notify('保存成功~', 'success', 3000);
              $('#tb_openingClassInfos').bootstrapTable('refresh', {pageSize: this.pageSize});
            }
          }
        });
      }else{
        $.ajax({
          type: 'PUT',
          url: "/ssm/openingClassInfo/openingClassInfo",
          data: JSON.stringify({
            "id" : $("#id").val(),
            "technicalDirection": $("#technicalDirection_add").val(),
            "classNature": $("#classNature_add").val(),
            "classTeacher": $("#classTeacher_add").val(),
            "lecturer": $("#lecturer_add").val(),
            "assistant": $("#assistant_add").val(),
            "areaId" : $("#area_add").val(),
            "classroomId": $("#classroom_add").val(),
            "openingDate" : $("#openingDate_add").val(),
            "endingDate" : $("#endingDate_add").val(),
            "schoolInfo": $("#schoolInfo_add").val()
          }),
          dataType: 'json',
          contentType: 'application/json',
          success: function (data, status) {
            if (data.code === 20000) {
              lightyear.loading('hide');
              lightyear.notify('修改成功~', 'success', 3000);
              $("#add_frame").modal('hide');
              $('#tb_openingClassInfos').bootstrapTable('refresh', {pageSize:this.pageSize});
            } else {
              lightyear.loading('hide');
              lightyear.notify('修改失败~', 'danger', 100);
            }
          },
          error: function () {
            lightyear.loading('hide');
            lightyear.notify('服务器错误，请稍后再试~', 'danger', 100);
            $('#tb_openingClassInfos').bootstrapTable('refresh', {pageSize:10});
          }
        });
      }
    });

    function getClassTeacher_add(){
      $("#classTeacher_add").empty()
      $.ajax({
        type:'GET',
        url: '/ssm/professionalTitle/professionalTitle',
        data: {
          title: "班主任"
        },
        dataType: 'json',
        success:(data)=>{
          if(data.code===20000){
            let professionalTitles =  data.data.professionalTitles;
            $("<option></option>").append('请选择').appendTo("#classTeacher_add");
            $.each(professionalTitles,(index,value)=>{
              let option = $("<option></option>").append(value.realName).attr("value",value.id);
              option.appendTo("#classTeacher_add");
            })

          }
        }
      })
    };

  function getLecturer_add(){
    $("#lecturer_add").empty()
    $.ajax({
      type:'GET',
      url: '/ssm/professionalTitle/professionalTitle',
      data: {
        title: "讲师"
      },
      dataType: 'json',
      success:(data)=>{
        if(data.code===20000){
          let professionalTitles =  data.data.professionalTitles;
          $("<option></option>").append('请选择').appendTo("#lecturer_add");
          $.each(professionalTitles,(index,value)=>{
            let option = $("<option></option>").append(value.realName).attr("value",value.id);
            option.appendTo("#lecturer_add");
          })

        }
      }
    });
    $.ajax({
      type:'GET',
      url: '/ssm/professionalTitle/professionalTitle',
      data: {
        title: "教务总监"
      },
      dataType: 'json',
      success:(data)=>{
        if(data.code===20000){
          let professionalTitles =  data.data.professionalTitles;
          $.each(professionalTitles,(index,value)=>{
            let option = $("<option></option>").append(value.realName).attr("value",value.id);
            option.appendTo("#lecturer_add");
          })

        }
      }
    });
  };


  function getAssistant_add(){
    $("#assistant_add").empty()
    $.ajax({
      type:'GET',
      url: '/ssm/professionalTitle/professionalTitle',
      data: {
        title: "助教"
      },
      dataType: 'json',
      success:(data)=>{
        if(data.code===20000){
          let professionalTitles =  data.data.professionalTitles;
          $("<option></option>").append('请选择').appendTo("#assistant_add");
          $.each(professionalTitles,(index,value)=>{
            let option = $("<option></option>").append(value.realName).attr("value",value.id);
            option.appendTo("#assistant_add");
          })

        }
      }
    })
  };
  function getClassroom_add(){
    $("#classroom_add").empty()
    $("#area_add").empty()
    $.ajax({
      type:'GET',
      url: '/ssm/classroom/classroom',
      dataType: 'json',
      success:(data)=>{
        if(data.code===20000){
          let classrooms =  data.data.classrooms;
          $("<option></option>").append('请选择').appendTo("#classroom_add");
          $.each(classrooms,(index,value)=>{
            $("<option></option>").append(value.classroomName).attr("value",value.id).appendTo("#classroom_add");
            $("<option></option>").append(value.area.areaName).attr("value",value.area.id).appendTo("#area_add");
          })

        }
      }
    })
  };

    $("#btn_delete").click(()=>{
      let rows = $("#tb_openingClassInfos").bootstrapTable("getAllSelections");
      if(rows.length<=0){
        lightyear.notify('请至少选择一条数据~', 'warning', 1000);
      }else{
        let ids = "";
        let technicalDirections = "";
        let classNatures = "";
        $.each(rows,(index,value)=>{
          ids += value.id + "-";
          technicalDirections += value.technicalDirection + ",";
          classNatures += value.classNature + ",";
        });
        ids = ids.substring(0,ids.length-1);
        technicalDirections = technicalDirections.substring(0,technicalDirections.length-1);
        classNatures = classNatures.substring(0,classNatures.length-1);
        $.confirm({
          title: '请注意',
          content: '你确定要删除技术方向为 '+ technicalDirections + '，班级性质为' + classNatures + '的开班信息吗?',
          type: 'red',
          buttons: {
            confirm: {
              text: '确认删除',
              btnClass: 'btn-primary',
              action: ()=>{
                lightyear.loading('show');
                $.ajax({
                  type: 'DELETE',
                  url: '/ssm/openingClassInfo/openingClassInfo/'+ ids,
                  dataType: 'json',
                  success:(data)=>{
                    if(data.code === 20000){
                      lightyear.loading('hide');
                      lightyear.notify('删除开班信息成功~', 'success', 3000);
                      $('#tb_openingClassInfos').bootstrapTable('refresh', {pageSize:this.pageSize});
                    }
                  }
                })
              }
            },
            cancel: {
              text: '取消删除'
            }
          }
        });
      };
    })

  function getTechnicalDirection_add(){
    $("#technicalDirection_add").empty()
    $("<option></option>").append('请选择').appendTo("#technicalDirection_add");
    $("<option></option>").append('Java开发').attr("value","Java开发").appendTo("#technicalDirection_add");
    $("<option></option>").append('Python开发').attr("value","Python开发").appendTo("#technicalDirection_add");
    $("<option></option>").append('C++开发').attr("value","C++开发").appendTo("#technicalDirection_add");
    $("<option></option>").append('前端开发').attr("value","前端开发").appendTo("#technicalDirection_add");
    $("<option></option>").append('大数据开发').attr("value","大数据开发").appendTo("#technicalDirection_add");
  }

  function getClassNature_add(){
    $("#classNature_add").empty()
    $("<option></option>").append('请选择').appendTo("#classNature_add");
    $("<option></option>").append('全日制').attr("value","全日制").appendTo("#classNature_add");
    $("<option></option>").append('非全日制').attr("value","非全日制").appendTo("#classNature_add");
  }


$('#tb_openingClassInfos').bootstrapTable({
    classes: 'table table-bordered table-hover table-striped',
    url: '/ssm/openingClassInfo/openingClassInfo/page',
    method: 'get',
    dataType : 'json',        // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
    uniqueId: 'id',            // 为每一行指示唯一的标识符。
    idField: 'id',             // 指明哪个字段将用作复选框/单选框值，与selectItemName对应。
    toolbar: '#toolbar',       // 工具按钮容器 jQuery选择指示工具栏，例如： #toolbar, .toolbar，或DOM节点。
    //clickToSelect: true,     // 是否启用点击选中行
    showColumns: true,         // 是否显示所有的列
    showRefresh: true,         // 是否显示刷新按钮
    
    //showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)

    pagination: true,                    // 是否显示分页
    sortOrder: "asc",                    // 排序方式

    sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
    pageNumber: 1,                       // 初始化加载第一页，默认第一页
    pageSize: 10,                        // 每页的记录行数
    pageList: [10, 25, 50, 100],         // 可供选择的每页的行数
    //search: true,                      // 是否显示表格搜索，此搜索是客户端搜索
    ajaxOptions:{
      header:{
        'Authorization':token
      },
      beforeSend : function(request) {
        request.setRequestHeader("Authorization",token );
      }
    },
    queryParamsType: '',
    queryParams: function(params) { // 传递参数
      let temp = {
        pageNum: params.pageNumber,
        pageSize: params.pageSize,
        technicalDirection: openingClassInfo.technicalDirection,
        classNature: openingClassInfo.classNature
      };
      return temp;
    },
    responseHandler:function (res){
      let nres = [];
      nres.push({total:res.data.pageInfo.total,rows:res.data.pageInfo.list})
      return nres[0];
    },

  //showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
    //exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
  
    columns: [{
        checkbox: true    // 是否显示复选框
    }, {
        field: 'id',
        title: 'ID',
        sortable: true    // 是否排序
    }, {
        field: 'technicalDirection',
        title: '技术方向'
    }, {
        field: 'classNature',
        title: '班级性质'
    }, {
        field: 'professionalTitleC.realName',
        title: '班主任'
    }, {
      field: 'professionalTitleC.id',
      visible: false
    },{
        field: 'professionalTitleL.realName',
        title: '讲师'
    },{
      field: 'professionalTitleL.id',
      visible: false
    },{
        field: 'professionalTitleA.realName',
        title: '助教'
    },{
      field: 'professionalTitleA.id',
      visible: false
    },{
        field: 'schoolInfo',
        title: '学校信息'
    }, {
      field: 'classroom.classroomName',
      title: '教室名称'
    }, {
      field: 'classroom.id',
      visible: false
    }, {
      field: 'area.areaName',
      title: '所属区域'
    }, {
      field: 'area.id',
      visible: false
    }, {
      field: 'openingDate',
      title: '开班日期'
    }, {
      field: 'endingDate',
      title: '结束日期'
    }, {
      field: 'createTime',
      title: '创建时间'
    }, {
      field: 'updateTime',
      title: '修改时间'
    },{
        field: 'operate',
        title: '操作',
        formatter: btnGroup,  // 自定义方法
        events: {
            'click .edit-btn': function (event, value, row, index) {
                editOpeningClassInfos(row);
            },
            'click .del-btn': function (event, value, row, index) {
              delOpeningClassInfos(row);
            },
            'click .show-btn': function (event, value, row, index) {
                showUser(row);
            }
        }
    }],

    onLoadSuccess: function(data){
        $("[data-toggle='tooltip']").tooltip();
    }
});

// 操作按钮
function btnGroup ()
{
    let html =
        '<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
        '<a href="#!" class="btn btn-xs btn-default m-r-5 show-btn" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>' +
        '<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
    return html;
}

// 操作方法 - 编辑
function editOpeningClassInfos(row)
{
  $("#myModalLabel").empty();
  $("#myModalLabel").append("编辑开班信息")
  $("#add_form")[0].reset();
  $("#id").val(row.id);
  $("#technicalDirection_add").val(row.technicalDirection);
  $("#classNature_add").val(row.classNature);
  $("#classTeacher_add").val(row.professionalTitleC.id);
  $("#lecturer_add").val(row.professionalTitleL.id);
  $("#assistant_add").val(row.professionalTitleA.id);
  $("#classroom_add").val(row.classroom.id);
  $("#area_add").val(row.area.id);
  $("#openingDate_add").val(row.openingDate)
  $("#endingDate_add").val(row.endingDate)
  $("#schoolInfo_add").val(row.schoolInfo)
  $("#add_frame").modal({
    backdrop:"static"
  });
}
// 操作方法 - 删除
function delOpeningClassInfos(row)
{
  $.confirm({
    title: '请注意',
    content: '你确定要删除技术方向为 '+row.technicalDirection+'，班级性质为'+row.classNature+'的开班信息吗?',
    type: 'red',
    buttons: {
      confirm: {
        text: '确认删除',
        btnClass: 'btn-primary',
        action: ()=>{
          lightyear.loading('show');
          $.ajax({
            type: 'DELETE',
            url: '/ssm/openingClassInfo/openingClassInfo/'+ row.id,
            dataType: 'json',
            success:(data)=>{
              if(data.code === 20000){
                lightyear.loading('hide');
                lightyear.notify('删除成功~', 'success', 3000);
                $('#tb_openingClassInfos').bootstrapTable('refresh', {pageSize:this.pageSize});
              }
            }
          });
        }
      },
      cancel: {
        text: '取消删除'
      }
    }
  });

}
// 操作方法 - 查看
function showUser()
{
    alert('查看详细');
}
</script>


</body>
</html>